<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../../js/load.js"></script>
    <style>
        .active {
            height: 15px;
            width: 15px;
            color: #009688
        }

        .inactive {
            height: 15px;
            width: 15px;
            color: #009688
        }

        .databaseitem {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            height: 30px;
            width: 100%;
            padding: 5px;
            padding-top: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="flexrow">
        <div class="layui-panel list-left-container" style="width: 200px;">
            <div style="display: flex;flex-direction: column;height: 100%;" id="view">

            </div>
        </div>
        <div class="layui-panel list-right-container">
            <div class="list-search-container">
                <button class="layui-btn layui-btn-sm" onclick="HandleAdd()" style="display: none" id="btnAdd"><i
                        class="layui-icon layui-icon-add-1 layui-font-12"></i>添加key
                </button>
                <div class="list-search-item">
                    <span style="width:50px">key：</span>
                    <input id="pattern" autocomplete="off" class="layui-input">
                </div>
                <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-disabled" style="margin-left:5px"onclick="BindTableData()"><i
                        class="layui-icon layui-icon-search layui-font-12"></i>搜索
                </button>
                <button id="btnClear" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-disabled" disabled style="margin-left:5px" onclick="FlushDataBase()"><i
                        class="layui-icon layui-icon-fonts-clear layui-font-12"></i>清除DB
                </button>
            </div>
            <table class="layui-table" lay-data="{id: 'datagrid',height:'full',limit:15}" lay-filter="datagrid">
                <thead>
                <tr>
                    <th lay-data="{field:'key'}">key</th>
                    <th lay-data="{field:'keyType',width:150,align:'center'}">类型</th>
                    <th lay-data="{field:'keyExpire',width:200,align:'center'}">过期时间</th>
                    <th lay-data="{fixed: 'right', width:175, align:'center', toolbar: '#op'}">操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="op">
    <button class="layui-btn layui-btn-sm" lay-event="HandleEdit"><i
            class="layui-icon layui-icon-edit layui-font-12"></i>编辑
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="HandleDelete"><i
            class="layui-icon layui-icon-delete layui-font-12"></i>删除
    </button>
</script>
<script type="text/html" id="database">
    {{#  layui.each(d.obj, function(index, item){ }}
    <div class="databaseitem" onclick="ChangeDBIndex('{{item.dbIndex}}')">
        {{# if (dbIndex == item.dbIndex) { }}
        <i class="layui-icon layui-icon-file active"></i>
        {{# } else { }}
        <i class="layui-icon layui-icon-template-1 inactive"></i>
        {{# } }}
        <span style="margin-left: 5px;"> {{item.dbName}} [{{item.keyCount}}]</span>
    </div>
    {{#  }); }}
</script>
</html>
<script>
    dbIndex = -1;
    dataBaseInfoList = [];
    $(function () {
        layui.use('laytpl', function () {
        })
        BindDataBaseInfo();
    })

    function BindDataBaseInfo() {
        var param = {}
        HttpPost(JSON.stringify(param), 'api/redis/getDataBaseInfo', function (result) {
            if (result.code == 0) {
                dataBaseInfoList = result.data;
                RenderDataBaseInfo();
            } else {
                OpenFail(result.msg);
            }
        })
    }

    function RenderDataBaseInfo() {
        var laytpl = layui.laytpl;
        var data = dataBaseInfoList;
        var getTpl = database.innerHTML
        var view = document.getElementById('view');
        laytpl(getTpl).render(data, function (html) {
            view.innerHTML = html;
        });
    }

    function BindTableData() {
        var param = {
            pattern: $("#pattern").val(),
            dbIndex: dbIndex
        }
        BindTable("datagrid", "api/redis/getDataBaseKeyList", param, null, true);
    }


    function HandleAdd() {
        OpenDialog('添加key', 'pages/redis/redis_addkey.html?dbIndex=' + dbIndex, 800, 700, function () {
            BindTableData();
        })
    }

    function HandleEdit(RowData) {
        if (RowData.keyType == "string") {
            OpenDialog('编辑key', 'pages/redis/redis_string_edit.html?dbIndex=' + dbIndex + "&key=" + RowData.key, 800, 600, function () {
                BindTableData();
            })
        }else if (RowData.keyType == "list") {
            OpenDialog('编辑key', 'pages/redis/redis_list_edit.html?dbIndex=' + dbIndex + "&key=" + RowData.key, 800, 700, function () {
                BindTableData();
            })
        }else if (RowData.keyType == "hash") {
            OpenDialog('编辑key', 'pages/redis/redis_hash_edit.html?dbIndex=' + dbIndex + "&key=" + RowData.key, 800, 700, function () {
                BindTableData();
            })
        }else if (RowData.keyType == "set") {
            OpenDialog('编辑key', 'pages/redis/redis_set_edit.html?dbIndex=' + dbIndex + "&key=" + RowData.key, 800, 700, function () {
                BindTableData();
            })
        }else if (RowData.keyType == "zset") {
            OpenDialog('编辑key', 'pages/redis/redis_zset_edit.html?dbIndex=' + dbIndex + "&key=" + RowData.key, 800, 700, function () {
                BindTableData();
            })
        }
    }

    function HandleDelete(RowData) {
        OpenConfirm('确认删除？', function () {
            var param = {
                key: RowData.key,
                dbIndex: dbIndex
            }
            HttpPost(JSON.stringify(param), 'api/redis/deleteKey', function (result) {
                if (result.code == 0) {
                    OpenSuccessMessage("删除成功")
                    BindTableData();
                } else {
                    OpenFail(result.msg);
                }
            })
        })
    }

    function ChangeDBIndex(selectDBIndex) {
        dbIndex = selectDBIndex;
        if (dbIndex != -1) {
            $("#btnAdd").show();
            $("#btnSearch").removeClass("layui-btn-disabled")
            $("#btnClear").removeClass("layui-btn-disabled")
            $("#btnClear").removeAttr("disabled")
        }
        RenderDataBaseInfo();
        BindTableData();
    }
    
    function FlushDataBase() {
        OpenConfirm('确认清除？', function () {
            var param = {
                dbIndex: dbIndex
            }
            HttpPost(JSON.stringify(param), 'api/redis/flushDB', function (result) {
                if (result.code == 0) {
                    OpenSuccessMessage("清除成功")
                    BindTableData();
                } else {
                    OpenFail(result.msg);
                }
            })
        })
    }
</script>